<script setup>
import {ref, onMounted, watch} from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
    data: {
        type: Object,
        required: true
    }
})

let chart = null
const target = ref()

onMounted(() => {
    chart = echarts.init(target.value);
    renderChart()
})

watch(() => props.data, () => {
    renderChart()
})
const renderChart = () => {
    const xData = props.data.births.map((item) => item.time);
    const yDataBirths = props.data.births.map((item) => item.value);
    const yDataDeaths = props.data.deaths.map((item) => item.value);
    /** @type EChartsOption */
    const option = {
        title: {
            text: '渐变堆叠曲线图',
            textStyle: {
                color: '#FFFFFF',
                fontSize: 16
            }
        },
        xAxis: {
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#162647',
                    type: 'dashed'
                }
            },
            type: 'category',
            data: xData.reverse(),  // 数据反转
            boundaryGap: false,     // 紧挨边缘
            axisTick: false,
            axisLine: {
                show: false
            }
        },
        yAxis: {
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#162647',
                    type: 'dashed'
                }
            },
            type: 'value',
            max: 400,
        },
        grid: {
            top: '15%',
            right: '5%',
            bottom: 0,
            left: 0,
            containLabel: true,
        },
        series: [
            {
                type: 'line',
                data: yDataBirths,
                smooth: true,   // 曲线
                stack: 'Total',
                areaStyle: {
                    color: {
                        type: 'linear',     // 线性渐变
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#681448' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#020a15' // 100% 处的颜色
                        }],
                    },
                    origin: 'start'
                },
                itemStyle: {
                    color: '#681448'
                }
            },
            {
                type: 'line',
                data: yDataDeaths,
                smooth: true,   // 曲线
                stack: 'Total',
                areaStyle: {
                    color: {
                        type: 'linear',     // 线性渐变
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#196e7a' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#020a15' // 100% 处的颜色
                        }],
                    },
                    origin: 'start'
                },
                itemStyle: {
                    color: '#196e7a'
                }
            }
        ]
    };
    chart.setOption(option);
}
</script>

<template>
    <div>
        <div ref="target" class="w-full h-full"></div>
    </div>
</template>

<style scoped></style>
